<template>
  <div class="activity">
    <div class="banner">
      <img class="headerBg" src="/static/img/bg.png" alt="" mode="widthFix">
      <span v-if="isLogin" class="common des"><span class="iconfont" ﻿@tap="toPage('/activity/myWelfare')">我的兑换</span></span>
      <div class="common content" v-if="isLogin">
        <span>可用 <span class="balance">{{integral}}</span> 积分</span>
        <div v-if="isLogin" class="sign" ﻿@tap="signInBtn"><span class="iconfont iconxingzhuang"></span> {{signInBtnFont}}</div>
      </div>
      <div class="common content" v-else>
        <span ﻿@tap="toPage('/person/login')">点击去登录</span>
      </div>
    </div>
    <div class="signContent" v-if="isLogin">
      <div class="title">已连续签到{{signInList.total}}天</div>
      <step :steps="signInList.list" :active="active"></step>
    </div>
    <div class="gift" v-if="isLogin">
      <div class="tab">
        <img src="/static/img/tabxie.png" class="left" mode="widthFix" alt="">
        <span class="title" :class="activeTab === 1 ? 'activeTab' :''" ﻿@tap="cutBtn(1)">赚积分</span>
        <span class="dot">·</span>
        <span class="title" :class="activeTab === 2 ? 'activeTab' :''" ﻿@tap="cutBtn(2)">换福利</span>
        <img src="/static/img/tabxie.png" class="right" mode="widthFix" alt="">
      </div>
      <cards v-for="(item, index) in info" :key="index"
        :item="item"
        :active="activeTab"
      >
      </cards>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import step from '@/components/activity/step'
  import cards from '@/components/activity/card'
  export default {
    mpType: 'page',
    components:{
      step: step,
      cards: cards
    },
    data() {
      return {
        loadingEnd:{
          moduleOne: false,
          moduleTwo: false,
          moduleThree: false,
          moduleFour: false,
        },
        signInBtnFont: "签到领积分",
        activeTab:1,
        info:[],
        signInList:"",
        welfareInfo:[],
        integral: 0,
        count: 0,
        value: '',
        active:0,
      }
    },
    methods: {
      toPage(url){
        uni.navigateTo({
        	url: url
        })
      },
      cutBtn(type){
        this.info = [];
        if(this.isLogin){
          if(type === 1){
            this.activeTab = 1;
            this.getTaskList();
          }
          else if(type === 2){
            this.activeTab = 2;
            this.getWealList();
          }
        }
      },
      signInBtn(){
        this.signIn();
      },
      signIn(){
        this.$ajax
          .post(this.$api.signIn,{task_id:1})
          .then(res => {
			this.viewLoad();
          })
          .catch(err => {
            ﻿uni.showToast({
              title: err,
              icon: 'none',
              duration: 2000
            })
          });
      },
      getMyInt(){
          this.$ajax
          .post(this.$api.myInt)
          .then(res => {
            this.loadingEnd.moduleOne = true;
            this.integral = res.int;
          })
          .catch(err => {
            this.loadingEnd.moduleOne = true;
            ﻿uni.showToast({
              title: err,
              icon: 'none',
              duration: 2000
            })
          });
      },
      getTaskList(){
        this.$ajax
          .post(this.$api.taskList)
          .then(res => {
            this.loadingEnd.moduleTwo = true;
            this.info = res.data;
          })
          .catch(err => {
            this.loadingEnd.moduleTwo = true;
            ﻿uni.showToast({
              title: err,
              icon: 'none',
              duration: 2000
            })
          });
      },
      getWealList(){
        this.$ajax
          .post(this.$api.wealList)
          .then(res => {
            this.loadingEnd.moduleThree = true;
            this.info = res.data;
          })
          .catch(err => {
            this.loadingEnd.moduleThree = true;
            ﻿uni.showToast({
              title: err,
              icon: 'none',
              duration: 2000
            })
          });
      },
      getSignAll(){
        this.$ajax
          .post(this.$api.signAll)
          .then(res => {
            this.loadingEnd.moduleFour = true;
            this.signInList = res;
            if(res.is_sign === "yes"){
              this.signInBtnFont = "今日已签到"
            }
            else {
              this.signInBtnFont = "签到领积分"
            }
          })
          .catch(err => {
            this.loadingEnd.moduleFour = true;
            ﻿uni.showToast({
              title: err,
              icon: 'none',
              duration: 2000
            })
          });
      },
      viewLoad(){
        this.loadingEnd = {
          moduleOne: false,
          moduleTwo: false,
          moduleThree: false,
          moduleFour: false,
        };
        this.info = []
        this.activeTab = 1;
        if(this.isLogin){
			uni.showLoading({
			  title: '加载中',
			  mask: true
			});
			this.getMyInt();
			this.getTaskList();
			this.getSignAll();
        }
      },
    },
    ﻿onShareAppMessage(res){
		this.$common.share()
	},
    onLoad(){
      ﻿uni.showShareMenu({
        withShareTicket: true
      })
    },
    onShow(){
      this.viewLoad();
    },
    onPullDownRefresh(){
      this.viewLoad();
      ﻿uni.stopPullDownRefresh() //停止下拉刷新
    },
    computed:{
      ...mapState([
        'isLogin'
      ]),
      hideLoading(){
        if(this.loadingEnd.moduleOne && this.loadingEnd.moduleTwo && this.loadingEnd.moduleFour){
          setTimeout(function(){
            ﻿uni.hideLoading()
            }, 800)
        }
      }
    },
  }
</script>

<style scoped>
  .gift{
    margin: 20rpx 30rpx 0 30rpx;
    background: white;
  }
  .tab{
    text-align: center;
    padding: 39rpx 0 74rpx 0;
  }
  .tab img{
    width: 120rpx;
    height: 21rpx;
  }
  .tab .title{
    font-size:36rpx;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(50,50,50,1);
    line-height:20rpx;
  }
  .tab .dot{
    font-weight: bold;
    font-size:36rpx;
    margin:  0 19rpx;
  }
  .activity{
    background: #f7f7f7;
  }
  .headerBg {
    width: 100%;
  }

  .banner {
    position: relative;
  }

  .common {
    position: absolute;
  }

  .des {
    right: 42rpx;
    top: 21rpx;
    font-size: 45rpx;
    font-family: PingFang SC;
    color: rgba(255, 255, 255, 1);
  }

  .content {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size:36rpx;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(255,255,255,1);
    line-height:60rpx;
    width: 100%;
  }
  .content>span{
    display: flex;
    justify-content: center;
  }
  .content .balance{
    font-size:60rpx;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(255,255,255,1);
    line-height:60rpx;
    margin-right: 20rpx;
    margin-left: 20rpx;
  }

  .sign {
    width: 318rpx;
    height: 90rpx;
    text-align: center;
    margin: 30rpx auto 0;
    background:rgba(255,244,244,1);
    box-shadow:0rpx 5rpx 21rpx 0rpx rgba(126,126,126,0.32), 0rpx 7rpx 3rpx 0rpx rgba(251, 76, 68, 0.35);
    border-radius:44rpx;
    font-size:30rpx;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(239,90,86,1);
    line-height:90rpx;
  }
  .iconxingzhuang{
    color:rgba(239,90,86,1);
    margin-right: 1rpx;
  }
  .signContent{
    position: relative;
    z-index: 10;
    margin: -76rpx 30rpx 0 30rpx;
    padding: 20rpx 13rpx;
    background: #ffffff;
    border-radius:10rpx;
    text-align: center;
  }
  .title{
    font-size:20rpx;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(50,50,50,1);
    line-height:20rpx;
    padding-bottom: 37rpx;
  }
  .left{
    margin-right: 18rpx;
  }
  .right{
    margin-left: 18rpx;
  }
  .tab .activeTab{
    color: #EF5A56;
    padding-bottom: 9rpx;
    border-bottom: 6rpx solid #EF5A56 ;
  }
  page {
    background-color: #F7F7F7;
    height: 100% !important;
    width: 100% !important;
  }
</style>
